<template>
  <div class="Community">
    <div class="search">
      <span class="iconfont icon-zuojiantou" @click="goback()"></span>
      <van-search
        v-model="value"
        background="#ff5555"
        placeholder="搜索"
        
      />
      <span class="iconfont icon-xiaoxi"></span>
    </div>
    <div class="navigation">
      <ul>
        <li>全部</li>
        <li>好物测评</li>
        <li>生活技能</li>
        <li>闲话家常</li>
      </ul>
    </div>
    <div class="discuss-one">
      <span class="iconfont icon-huatong"></span>
      <h1>关干冰箱.你有什么要叶槽的?</h1>
      <h2>你对你家冰箱有什么不满:不够好看、容量太小或太</h2>
      <h3>大、制冷效果不好、总有异味,还是......?快来说..</h3>
      <div class="head">
        <img src="../../assets/touxiang/tou1.jpg" alt="" />
        <img src="../../assets/touxiang/tou2.jpg" alt="" />
        <img src="../../assets/touxiang/tou3.jpg" alt="" />
        <img src="../../assets/touxiang/tou4.jpg" alt="" />
        <p>1401人参加讨论</p>
      </div>
    </div>
    <div class="discuss-two">
      <span class="iconfont icon-huatong"></span>
      <h1>清洁用品推荐大会</h1>
      <h2>你用过哪些好用的清洁用品?快推荐给住友们吧.记</h2>
      <h3>得附上推荐理由哦~</h3>
      <div class="head">
        <img src="../../assets/touxiang/tou1.jpg" alt="" />
        <img src="../../assets/touxiang/tou2.jpg" alt="" />
        <img src="../../assets/touxiang/tou3.jpg" alt="" />
        <img src="../../assets/touxiang/tou4.jpg" alt="" />
        <p>1401人参加讨论</p>
      </div>
    </div>
    <i class="iconfont icon-tianjia"></i>
  </div>
</template>

<script>
export default {
  data() {
    return{
      value:''
    }
  },
   methods: {
    goback() {
      this.$router.replace({ name: "home" });
    }, 
  }
};
</script>

<style scoped lang="less">
.Community {
  .search {
    background-color: #ff5654;
    span {
     color: #fff;
      font-size: 40px;
      padding-left: 20px;
    }
    .van-search {
      display: inline-block;
      width: 80%;
      
    }
  }
  .navigation {
    height: 90px;
    border-bottom: 1px solid #fff;
    box-shadow: 0px 0px 5px 1px #ccc;
    ul {
      height: 90px;
      width: 100%;
      li {
        font-size: 30px;
        float: left;
        margin: 25px 40px;
        font-weight:bolder ;
      }
      li:nth-child(2) {
        color: #ff5555;
      }
    }
  }
  .discuss-one {
    width: 700px;
    height: 500px;
    border: 1px solid #fff;
    box-shadow: 0px 0px 5px 0px #ccc;
    margin: 50px 20px;
    float: left;
    border-radius: 10px;
    span{
      font-size: 80px;
      margin-left: 300px;
      margin-top: 80px;
      display: inline-block;
    }
    h1 {
      width: 500px;
      color: #000000;
      opacity: 70%;
      font-size: 26px;
      display: flex;
      justify-content: center;
      margin: 40px 120px 0 100px;
    }
    h2 {
      width: 600px;
      color: #000000;
      opacity: 70%;
      font-size: 24px;
      display: flex;
      margin: 0 70px;
    }
    h3{
      width: 600px;
      color: #000000;
      opacity: 70%;
      font-size: 24px;
      display: flex;
      justify-content: center;
      margin: 0 40px;
    }
    .head {
      margin: 70px 140px;
      width: 400px;
      height: 100px;
    
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        float:left;
        
      }
      img:nth-child(1){
          margin: 0px 0px 0 -20px;
          
      }
      img:nth-child(2) {
          margin: 0px 0px 0 -30px;
         
      }
      img:nth-child(3) {
        
        margin: 0px 0px 0 -20px;
      }
      img:nth-child(4) {
          margin: 0px 0px 0 -30px;
      }
      p {
        font-size: 24px;
        color: #000000;
        opacity: 70%;
        display: inline-block;
        margin-top: 20px;
      }
    }
  }
   .discuss-two {
    width: 700px;
    height: 500px;
    border: 1px solid #fff;
    box-shadow: 0px 0px 5px 0px #ccc;
    margin: 30px 20px;
    float: left;
    border-radius: 10px;
    span{
      font-size: 80px;
      margin-left: 300px;
      margin-top: 80px;
      display: inline-block;
    }
    h1 {
      width: 500px;
      color: #000000;
      opacity: 70%;
      font-size: 26px;
      display: flex;
      justify-content: center;
      margin: 40px 120px 0 100px;
    }
    h2 {
      width: 600px;
      color: #000000;
      opacity: 70%;
      font-size: 24px;
      display: flex;
      margin: 0 70px;
    }
    h3{
      width: 600px;
      color: #000000;
      opacity: 70%;
      font-size: 24px;
      display: flex;
      justify-content: center;
      margin: 0 40px;
    }
    .head {
      margin: 70px 140px;
      width: 400px;
      height: 100px;
    
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        float:left;
        
      }
      img:nth-child(1){
          margin: 0px 0px 0 -20px;
          
      }
      img:nth-child(2) {
          margin: 0px 0px 0 -30px;
         
      }
      img:nth-child(3) {
        
        margin: 0px 0px 0 -20px;
      }
      img:nth-child(4) {
          margin: 0px 0px 0 -30px;
      }
      p {
        font-size: 24px;
        color: #000000;
        opacity: 70%;
        display: inline-block;
        margin-top: 20px;
      }
    }
  }
  i{
    color: #ff5555;
    font-size: 80px;
    margin-left: 630px;
  }
} 
</style>